﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Inicio.aspx.cs" Inherits="ComponenteWeb.Pages.Inicio" %>

<!DOCTYPE HTML>

<html>
<head>
    <title>Joophin</title>
    <link href="../Images/cabecera/favicon.icon" rel="shortcut icon" />
    <link rel="stylesheet" href="../Estilo/principal/home.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../Estilo/css/screen.css" type="text/css" media="screen, projection"/>
    <link rel="stylesheet" href="../Estilo/css/print.css" type="text/css" media="print"/>  
    
</head>
<body>
    <form id="form1" runat="server">
    <div id="cabecera">
   	    <div class="container">
      	<div class="span-10 last">
         	<div id="logo">
                <img alt="logojoophin"  src="../Images/cabecera/logoblanco.png"/>
			</div>
        </div>
        <div class="prepend-4 span-10 last">
            
                <div id="nav">
                       <asp:TextBox  placeholder="Email" CssClass="cajaTextoEmail" ID="txtEmail" runat="server" type="text"></asp:TextBox>
                       <asp:TextBox TextMode="Password" placeholder="Password" CssClass="cajaTextoPassword" ID="txtPassword" runat="server" type="text"></asp:TextBox>
                       
                       <ul>
                            <li><asp:CheckBox ID="chkRecuerdame" runat="server" Text="Recuerdame" /></li>
                            <li><a href="">¿Has olvidado tu contraseña?</a></li>
                       </ul>
      	        </div>
                <div id="divbotoLogin"><asp:ImageButton ID="btLogin" ImageUrl="~/Images/cabecera/botonLogin.png" runat="server" Width="55px" Height="25px"/></div>
            
      	</div>
   	</div>
   </div>
   <div class="container">
        <div id="tituloPrincipal">
            <div class="span-24 last">
                   <span >The best way to discover a job</span>
             </div>
         </div>
        <div class="span-24 last">
                        <div class="span-12 last prepend-6">
                            <div id="titulodefinicion">
                                  <span>¿Qué es Joophin?</span>
                            </div>
                        </div>          
        </div>
         <div class="span-12 last prepend-3">
                <div id="tituloSignificado">                    Joophin es el medio social que permite conseguir<br/>                        empleos de la manera más rapida y divertida
                </div>
         </div>
         <div class="span-16 last prepend-12">
                 <div id="divicion">
                    <img alt="" src="../Images/cabecera/divicion.png" height="340px" width="3px"/>
                </div>
         </div>
         <div id="invitacion">
         ¿Quieres una Invitación?<span id="obtenerInvitacion"><a href="">Obtener</a></span>
         </div>
         <div id="divbotonEmpresa">
         <asp:Button CssClass="botonEmpresa" ID="btEmpresa" Text="Registrar Empresa" runat="server"/>
         </div>
         <div id="divAplicar">
                <div><img alt="" src="../Images/cabecera/loginAplicar.png"/></div><div id="TituloAplicar">Aplicar <br/><div id="definicionAplicar">Encuentra y Aplica en las mejores <span>ofertas de empleo en todo el mundo.</div></span></div>
         </div>
         <div id="divRecomendar">
                <div><img alt="" src="../Images/cabecera/loginRecomendar.png"/></div><div id="TituloAplicar">Recomendar<br/><div id="definicionAplicar">Recomienda y Comparte con tus amigos las ofertas más interesantes.</span></div></div>
         </div>
         <div id="divSeguir">
                <div><img alt="" src="../Images/cabecera/loginSeguir.png"/></div><div id="TituloAplicar">Seguir<br/><div id="definicionAplicar">Se el primero en enterarte de las oportunidades de las empresas.</span></div></div>
         </div>
         <div id="divOrganizar">
                <div><img alt="" src="../Images/cabecera/loginOrganizar.png"/></div><div id="TituloAplicar">Organizar<br/><div id="definicionAplicar">Gestiona  y Organiza tus entrevistas,enterate de los procesos via estadisticas</span></div></div>
         </div>
          <div id="divMovil">
                <div><img alt="" src="../Images/cabecera/loginMovil.png"/></div><div id="TituloAplicar">Móvil<br/><div id="definicionAplicar">Localiza todas las oportunidades disponible a tu alrededor</span></div></div>
         </div>
   </div>
    <div id="divpie">
   <div class="container">
      <div class="span-21">
         	<div id="enlacespie">
					Enlaces | Típicos | De los que | Se colocan | En el pie
			</div>
      </div>
      <div class="span-3 last">
         logo en pequeño
      </div>
   </div>
</div>
    </form>

    <script>
        function testAttribute(element, attribute) {
            var test = document.createElement(element);
            if (attribute in test)
                return true;
            else
                return false;
        }

        if (!testAttribute("input", "placeholder")) {
            window.onload = function () {
                var demo1 = document.getElementById("txtEmail");
                var demo2 = document.getElementById("txtPassword");
                var text_content1 = "Email";
                var text_content2 = "Password";

                demo1.style.color = "gray";
                demo1.value = text_content1;
                demo2.style.color = "gray";
                demo2.value = text_content2;


                demo1.onfocus = function () {
                    if (this.style.color == "gray")
                    { this.value = ""; this.style.color = "black" }
                }

                demo1.onblur = function () {
                    if (this.value == "")
                    { this.style.color = "gray"; this.value = text_content1; }
                }

                demo2.onfocus = function () {
                    if (this.style.color == "gray")
                    { this.value = ""; this.style.color = "black" }
                }

                demo2.onblur = function () {
                    if (this.value == "")
                    { this.style.color = "gray"; this.value = text_content2; }
                }
            }
        }
</script> 
</body>

</html>
